var hasAddSecondGragh = 0;
var myJSONObject;
var myJSONObject2;



			 
$("#pagePrint").ready( function(){


                var canvas = document.getElementById("drawTMCanvas");
                /*
                var translatePos = {
                    x: canvas.width / 2,
                    y: canvas.height / 2
                };
				*/
				 var translatePos = {
                    x: 0,
                    y: 0
                };

                var scale = 1.0;
                var scaleMultiplier = 0.8;
                var startDragOffset = {};
                var mouseDown = false;
               
			   //alert("Hello! hasAddSecondGragh:" +hasAddSecondGragh);
			   
                // add button event listeners
                document.getElementById("plus").addEventListener("click", function(){
                    scale /= scaleMultiplier;
                    draw(scale, translatePos);
					if(hasAddSecondGragh==1){
					add_TM_function(scale, translatePos);
					}
					  //alert("Hello! hasAddSecondGragh:" +hasAddSecondGragh);
                }, false);

                document.getElementById("minus").addEventListener("click", function(){
                    scale *= scaleMultiplier;
                    draw(scale, translatePos);
					if(hasAddSecondGragh==1){
					add_TM_function(scale, translatePos);
					}
                }, false);

                // add event listeners to handle screen drag
                canvas.addEventListener("mousedown", function(evt){
                    mouseDown = true;
                    startDragOffset.x = evt.clientX - translatePos.x;
                    startDragOffset.y = evt.clientY - translatePos.y;
                });

                canvas.addEventListener("mouseup", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mouseover", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mouseout", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mousemove", function(evt){
                    if (mouseDown) {
                        translatePos.x = evt.clientX - startDragOffset.x;
                        translatePos.y = evt.clientY - startDragOffset.y;
                        draw(scale, translatePos);
						if(hasAddSecondGragh==1){
					    add_TM_function(scale, translatePos);
					    }
                    }
                });
                

                canvas.addEventListener("touchstart", function(evt){
                    mouseDown = true;
                    startDragOffset.x = evt.clientX - translatePos.x;
                    startDragOffset.y = evt.clientY - translatePos.y;
                });
 
                
                 canvas.addEventListener("touchmove", function(evt){
                    if (mouseDown) {
                        translatePos.x = evt.clientX - startDragOffset.x;
                        translatePos.y = evt.clientY - startDragOffset.y;
                        draw(scale, translatePos);
						if(hasAddSecondGragh==1){
					    add_TM_function(scale, translatePos);
					    }
                    }
                });
				
				
             $("#check_TM_button").on("click", function(){
                draw(scale, translatePos);
            });
                
            }); 

function draw(scale, translatePos){

 $.getJSON("/Server/tmviewer.json", function( data ) {
                     // operate on return data (jsonData)
                       myJSONObject=data;
					   
					  //alert(myJSONObject.content[0].title);
                    }).done(function(){
					
					//alert("after first json");
    var xMax=-9.9E20;
	var xMin=9.9E20;
	var yMax=-9.9E20;
	var yMin=9.9E20;

    var myCanvas=document.getElementById("drawTMCanvas");
	var context=myCanvas.getContext("2d");
	context.strokeStyle = '#0f0';
   
	
	<!--depend on device -->
	myCanvas.width = 700;
    myCanvas.height = 500;
	
	 context.clearRect(0, 0, myCanvas.width, myCanvas.height);
     context.save();
     context.translate(translatePos.x, translatePos.y);
     context.scale(scale, scale);
	 
	 context.beginPath();
	 context.moveTo(0,(myCanvas.height)/2);
	
	document.getElementById("title").innerHTML=myJSONObject.content[0].title;
	document.getElementById("name").innerHTML=myJSONObject.content[0].curves[0].name;


	document.getElementById("startDate").innerHTML=myJSONObject.content[0].curves[0].startDate;
	document.getElementById("endDate").innerHTML=myJSONObject.content[0].curves[0].endDate;
		

   for(var i = 0; i < myJSONObject.content[0].curves[0].points.length; i++)
   {var x = myJSONObject.content[0].curves[0].points[i].x;
	var y = myJSONObject.content[0].curves[0].points[i].y;
	
	 if(x>xMax){
	  xMax=x;
	   }
	 if(x<xMin){
       xMin=x;	  
 	  }
     if(y>yMax){
	  yMax=y;
	   }
	 if(y<yMin){
       yMin=y;	  
 	  }
   }

        
for(var i = 0; i < myJSONObject.content[0].curves[0].points.length; i++)
{	
	var x = myJSONObject.content[0].curves[0].points[i].x;
	var y = myJSONObject.content[0].curves[0].points[i].y;
	
	var xDraw =(x-xMin)*(myCanvas.width)/(xMax-xMin)
	var yDraw =(y-yMin)*(myCanvas.height)/(yMax-yMin)
	
	context.lineTo(xDraw,yDraw);
	
}

context.stroke();
context.restore();
});
}
			
function add_TM(){
var translatePos = {
                    x: 0,
                    y: 0
                };

var scale = 1.0;
add_TM_function(scale, translatePos);
hasAddSecondGragh = 1;
}
	



function add_TM_function(scale, translatePos){

$.getJSON("/Server/tmviewer2.json", function( data ) {
                     // operate on return data (jsonData)
                       myJSONObject2=data;
					   
					  //alert(myJSONObject2.content[0].title);
                    }).done(function(){
 
    var xMax=-9.9E20;
	var xMin=9.9E20;
	var yMax=-9.9E20;
	var yMin=9.9E20;
	
	 
	 
	var myCanvas=document.getElementById("drawTMCanvas");
	var context=myCanvas.getContext("2d");
	context.strokeStyle = '#0f0';
   
	
	//alert("Hello! I am an alert box!!");
	 //alert("Hello! I am an alert box!!" +scale + translatePos.x +translatePos.x );
	 //context.clearRect(0, 0, myCanvas.width, myCanvas.height);
     context.save();
     context.translate(translatePos.x, translatePos.y);
     context.scale(scale, scale);
	 
	 context.beginPath();
	 context.moveTo(0,(myCanvas.height)/2);
	 
	 
	
document.getElementById("title").innerHTML=myJSONObject2.content[0].title;
document.getElementById("name").innerHTML=myJSONObject2.content[0].curves[0].name;


document.getElementById("startDate").innerHTML=myJSONObject2.content[0].curves[0].startDate;
document.getElementById("endDate").innerHTML=myJSONObject2.content[0].curves[0].endDate;

   for(var i = 0; i < myJSONObject2.content[0].curves[0].points.length; i++)
   {var x = myJSONObject2.content[0].curves[0].points[i].x;
	var y = myJSONObject2.content[0].curves[0].points[i].y;
	
	 if(x>xMax){
	  xMax=x;
	   }
	 if(x<xMin){
       xMin=x;	  
 	  }
     if(y>yMax){
	  yMax=y;
	   }
	 if(y<yMin){
       yMin=y;	  
 	  }
   }

     
for(var i = 0; i < myJSONObject2.content[0].curves[0].points.length; i++)
{	
	var x = myJSONObject2.content[0].curves[0].points[i].x;
	var y = myJSONObject2.content[0].curves[0].points[i].y;
	
	var xDraw =(x-xMin)*(myCanvas.width)/(xMax-xMin)
	var yDraw =(y-yMin)*(myCanvas.height)/(yMax-yMin)
	
	context.lineTo(xDraw,yDraw);
	
}
context.stroke();
context.restore();
});

}










